<template>
	<div>
		<!-- 表单 -->
		<div class="app-container">
			<div class="w-full bg-[#4b8dffcc] h-10 border">
				<p class="pl-4 leading-10 font-bold text-[#fff]">{{ $t('machine.configs.subjectInfo')}}</p>
			</div>
			<div class="w-full flex flex-wrap pl-10 border p-4 mb-4 relative">
				<div class="w-1/3">
					<div class="mb-4 truncate">{{$t('goods.corner.activitName')}}: <span class="ml-4">{{ data.findList.pick_name }}</span></div>
					<div class="mb-4 truncate">{{$t('marketing.preferential.state')}}: <span class="ml-4">{{ setActStatus(data.findList.status) }}</span>
					</div>
				</div>
				<div class="w-1/3">
					<div class="mb-4 truncate">{{ $t('marketing.pickupcode.dispatch') }} : <span class="ml-4">{{ setPick_type(data.findList.pick_type) }}</span>
					</div>
					<div class="mb-4 truncate">{{$t('marketing.reduction.desc')}}: <span
							class="ml-4">{{ data.findList.desc ? data.findList.desc : '--' }}</span></div>
				</div>
				<div class="w-1/3">
					<div class="mb-4 truncate">{{$t('date.activeDate')}}:
						<span class="ml-4" v-if="!data.findList.start_time">--</span>
						<span class="ml-4">{{ getPlevel.gettime(data.findList.start_time, 3) }}~{{
							data.findList.end_time ? getPlevel.gettime(data.findList.end_time, 3) :$t('public.unlimited')}}</span>
					</div>
				</div>
				<div class="absolute right-5 bottom-5">
					<el-button @click="modify(data.findList)">{{ $t('public.modify') }}</el-button>
				</div>
			</div>
			<div>
				<el-button @click="cancel">{{ $t('public.return') }}</el-button>
				<el-button v-prmis="'activity_pick_exportUsedList'" type="primary" @click="getExport">{{$t('marketing.preferential.exportOrder')}}</el-button>
			</div>
		</div>
		<!-- 表格 -->
		<div class="app-container" v-loading="data.mtloading">
			<el-table :data="data.list" height="670" @selection-change="handleSelectionChange"
				:header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" class="w-full">
				<el-table-column type="selection" width="55" />
				<el-table-column prop="apc_id" label="ID" />
				<el-table-column prop="code" :label="$t('marketing.pickupcode.deliveryCode')" show-overflow-tooltip />
				<el-table-column prop="machine_name" :label="$t('machine.name')" show-overflow-tooltip />
				<el-table-column prop="machine_id" :label="$t('machine.code')" show-overflow-tooltip />
				<el-table-column prop="trade_no" :label="$t('marketing.preferential.orderCode')" show-overflow-tooltip />
				<el-table-column prop="status" :label="$t('public.state')" show-overflow-tooltip />
			</el-table>
			<!-- 分页 -->
			<PageNum :total="data.total" :page="data.order" @exposeData="current" @fraction="fraction" />
		</div>
		<exports :dialogVisible="dialogExport" @close="dialogExport = false"/>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import PageNum from '@/components/PageNum/index.vue';
import { getActivityPickCodeList, exportActivityPickCodeList, getFindActivityPick } from '@/api/marketing'
import { useRoute, useRouter } from "vue-router";
import getPlevel from '@/utils/level'
import { ElMessage, ElMessageBox } from "element-plus";
import exports from '@/components/export.vue';
const dialogExport = ref(false)
let router = useRouter()
let route = useRoute()
let data = reactive({
	mtloading: false, // 加载
	order: { // 传参
		ap_id: null,
		page: 1,
		pageNum: 15
	},
	orderid: [], // 选中的订单
	total: 0, // 总条数
	list: [], // 列表信息
	objcet: {
		type: 3,
		file_path: ''
	},
	findList: {}
})
// 修改
let modify = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/marketing/pickupcode/details_info', query: query })
}
//取消
let cancel = () => {
	router.back()
}
let setPick_type = (e) => {
	if (e == 1) {
		e = $t('marketing.pickupcode.systemRandom')
	}
	if (e == 2) {
		e = $t('marketing.pickupcode.choice')
	}
	return e
}
let setActStatus = (e) => {
	if (e == 1) {
		e = $t('goods.corner.not')
	}
	if (e == 2) {
		e = $t('goods.corner.progress')
	}
	if (e == 3) {
		e = $t('goods.corner.ended')
	}
	if (e == 4) {
		e = $t('marketing.guess.active')
	}
	return e
}
let getFind = () => {
	let id = Number(route.query.id)
	getFindActivityPick({ id: id }).then(res => {
		data.findList = res.data
	})
}
getFind()
// 获取列表信息
let getData = () => {
	data.order.ap_id = Number(route.query.id)
	getActivityPickCodeList(data.order).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}

// 页数回调
let current = (e) => {
	data.order.page = e
	getData()
}

// 条数回调
let fraction = (e) => {
	data.order.pageNum = e
	getData()
}

// 选中订单
let handleSelectionChange = (e) => {
	data.orderid = []
	for (let item of e) {
		data.orderid.push(item.apc_id)
	}
}

// 导出
let getExport = () => {
	if (data.orderid.length == 0) {
		ElMessage({
			message: $t('message.pleaseExportOrder'),
			type: 'error'
		})
		return
	}
	let obj = {
		id: data.orderid.join(',')
	}
	ElMessageBox.confirm($t('message.isExport')).then(res => {
		exportActivityPickCodeList(obj).then(res => {
			if (res.state == 200) {
				dialogExport.value = true
				getData()
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		}).catch(err => {
			console.log(err)
		})
	}).catch(err => {
		console.log('取消')
	})
}
getData()
</script>
